<script setup>
import { ref, onMounted, computed } from 'vue'
import * as echarts from 'echarts'
import { User, ArrowRight, Calendar } from '@element-plus/icons-vue'
import { getReportWorkOrganizationApi } from '../api/modules/reportWorkOrganization'
import { getDashboardDataApi } from '../api/modules/dashboard'

// 体测工作状态
const reportWorkStatus = ref({
  isStart: false,
  beginDate: null,
  endDate: null,
  status: 0 // 0：未启动 1：进行中 2：已结束
})

// 仪表盘数据
const dashboardData = ref({
  role: 0, // 默认班主任角色
  finishedCount: 0,
  unfinishedCount: 0,
  excellence: 0,
  good: 0,
  qualified: 0,
  substandard: 0,
  BMINormal: 0,
  BMIOverweight: 0,
  BMILowWeight: 0,
  BMIFat: 0,
  recentFiveYearsQualifiedRate: {}
})

// 是否正在加载
const isLoading = ref(true)

// 图表实例
let completionChart = null
let scoreChart = null
let bmiChart = null
let yearsRateChart = null
let eduYearsRateChart = null

// 日历相关
const currentDate = ref(new Date())
const selectedDate = ref(new Date())

// 查询今年体测工作状态
const fetchReportWorkStatus = async () => {
  try {
    isLoading.value = true
    const result = await getReportWorkOrganizationApi()
    if (result.code === 1 && result.data) {
      reportWorkStatus.value = result.data
      return true
    }
    return false
  } catch (error) {
    console.error('获取体测工作状态失败:', error)
    return false
  } finally {
    isLoading.value = false
  }
}

// 查询仪表盘数据
const fetchDashboardData = async () => {
  try {
    const result = await getDashboardDataApi()
    if (result.code === 1 && result.data) {
      dashboardData.value = result.data

      console.log('仪表盘数据:', dashboardData.value)
      return true
    }
    return false
  } catch (error) {
    console.error('获取仪表盘数据失败:', error)
    return false
  }
}

// 初始化上报完成度图表
const initCompletionChart = () => {
  const chartDom = document.getElementById('completion-chart')
  if (!chartDom) return
  
  completionChart = echarts.init(chartDom)
  const option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        radius: '100%',
        itemStyle: {
          color: '#5470C6'
        },
        progress: {
          show: true,
          width: 20,
          itemStyle: {
            color: '#5470C6'
          }
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: 20,
            color: [
              [getCompletionRate(), '#5470C6'],
              [1, '#E1E6EB']
            ]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          show: false
        }
      }
    ]
  }
  completionChart.setOption(option)
}

// 获取完成率
const getCompletionRate = () => {
  const total = dashboardData.value.finishedCount + dashboardData.value.unfinishedCount
  if (total === 0) return 0
  return dashboardData.value.finishedCount / total
}

// 初始化成绩指标图表
const initScoreChart = () => {
  const chartDom = document.getElementById('score-chart')
  if (!chartDom) return
  
  scoreChart = echarts.init(chartDom)
  
  // 获取四个等级的数据
  const total = dashboardData.value.excellence + dashboardData.value.good + dashboardData.value.qualified + dashboardData.value.substandard
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      bottom: '0%',
      left: 'center',
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: '#333',
        fontSize: 12
      }
    },
    series: [
      {
        name: '成绩等级',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'inside',
          formatter: '{d}%',
          fontSize: 12,
          color: '#fff'
        },
        labelLine: {
          show: false
        },
        data: [
          { 
            value: dashboardData.value.excellence, 
            name: '优秀', 
            itemStyle: { color: '#409EFF' }
          },
          { 
            value: dashboardData.value.good, 
            name: '良好', 
            itemStyle: { color: '#67C23A' }
          },
          { 
            value: dashboardData.value.qualified, 
            name: '合格', 
            itemStyle: { color: '#E6A23C' }
          },
          { 
            value: dashboardData.value.substandard, 
            name: '不合格', 
            itemStyle: { color: '#F56C6C' }
          }
        ]
      }
    ]
  }
  scoreChart.setOption(option)
}

// 初始化BMI指标分布图表
const initBmiChart = () => {
  const chartDom = document.getElementById('bmi-chart')
  if (!chartDom) {
    console.error('BMI图表DOM元素不存在')
    return
  }
  
  // 获取BMI数据，确保每个值都是有效的数字
  const normalValue = Number(dashboardData.value.bminormal) || 0
  const overweightValue = Number(dashboardData.value.bmioverweight) || 0
  const lowWeightValue = Number(dashboardData.value.bmilowWeight) || 0
  const fatValue = Number(dashboardData.value.bmifat) || 0
  
  console.log('原始BMI数据:', {
    正常: dashboardData.value.BMINormal,
    超重: dashboardData.value.BMIOverweight,
    低体重: dashboardData.value.BMILowWeight,
    肥胖: dashboardData.value.BMIFat
  })
  
  // 检查是否所有值都为0
  const allZero = normalValue === 0 && overweightValue === 0 && 
                 lowWeightValue === 0 && fatValue === 0
  
  // 准备数据 - 使用处理后的数值
  const bmiData = allZero 
    ? [
        { value: 25, name: '正常', itemStyle: { color: '#409EFF' } },
        { value: 10, name: '超重', itemStyle: { color: '#E6A23C' } },
        { value: 5, name: '低体重', itemStyle: { color: '#85E89D' } },
        { value: 8, name: '肥胖', itemStyle: { color: '#F56C6C' } }
      ]
    : [
        { value: normalValue, name: '正常', itemStyle: { color: '#409EFF' } },
        { value: overweightValue, name: '超重', itemStyle: { color: '#E6A23C' } },
        { value: lowWeightValue, name: '低体重', itemStyle: { color: '#85E89D' } },
        { value: fatValue, name: '肥胖', itemStyle: { color: '#F56C6C' } }
      ]
  
  // 如果图表已存在，先销毁
  if (bmiChart) {
    bmiChart.dispose()
  }
  
  // 初始化图表
  bmiChart = echarts.init(chartDom)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      bottom: '5%',
      left: 'center',
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: '#333',
        fontSize: 12
      }
    },
    series: [
      {
        name: 'BMI指数分布',
        type: 'pie',
        radius: ['30%', '60%'],
        center: ['50%', '40%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'inside',
          formatter: '{d}%',
          fontSize: 12,
          color: '#fff'
        },
        labelLine: {
          show: false
        },
        data: bmiData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  // 设置图表选项
  bmiChart.setOption(option)
  console.log('BMI图表初始化完成', bmiData)
}

// 初始化近五年体测数据达标率图表
const initYearsRateChart = () => {
  const chartDom = document.getElementById('years-rate-chart')
  if (!chartDom) return
  
  yearsRateChart = echarts.init(chartDom)
  
  // 获取近五年达标率数据
  const yearRateData = dashboardData.value.recentFiveYearsQualifiedRate || {}
  
  // 处理数据 - 按年份排序
  const years = Object.keys(yearRateData).sort((a, b) => parseInt(a) - parseInt(b))
  
  // 获取对应的率值并转换为百分比格式
  const rates = years.map(year => {
    const rate = yearRateData[year]
    // 验证数据是否合理，确保是小数(0-1之间)
    const validRate = validateRate(rate)
    // 将小数转换为百分比，并保留一位小数
    return parseFloat((validRate * 100).toFixed(1))
  })
  
  // 过滤掉异常年份(如未来年份)
  const currentYear = new Date().getFullYear()
  const filteredYears = []
  const filteredRates = []
  
  years.forEach((year, index) => {
    if (parseInt(year) <= currentYear) {
      filteredYears.push(year)
      filteredRates.push(rates[index])
    } else {
      console.warn(`发现未来年份数据: ${year}`)
    }
  })
  
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}年: {c}%',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: filteredYears,
      axisLabel: {
        interval: 0,
        rotate: 0
      }
    },
    yAxis: {
      type: 'value',
      name: '达标率',
      min: 0,
      max: 100,
      interval: 20,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: '体测达标率',
        type: 'bar',
        data: filteredRates,
        barWidth: '40%',
        itemStyle: {
          color: function(params) {
            // 创建渐变色，从浅蓝到深蓝
            return {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#4B96F3' // 浅蓝色
              }, {
                  offset: 1, color: '#1E5BB7' // 深蓝色
              }]
            }
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}%'
        }
      }
    ]
  }
  
  yearsRateChart.setOption(option)
}

// 初始化教育局管理员视角的近五年体测数据达标率图表
const initEduYearsRateChart = () => {
  const chartDom = document.getElementById('edu-years-rate-chart')
  if (!chartDom) return
  
  eduYearsRateChart = echarts.init(chartDom)
  
  // 获取近五年达标率数据
  const yearRateData = dashboardData.value.recentFiveYearsQualifiedRate || {}
  
  // 处理数据 - 按年份排序
  const years = Object.keys(yearRateData).sort((a, b) => parseInt(a) - parseInt(b))
  
  // 获取对应的率值并转换为百分比格式
  const rates = years.map(year => {
    const rate = yearRateData[year]
    // 验证数据是否合理，确保是小数(0-1之间)
    const validRate = validateRate(rate)
    // 将小数转换为百分比，并保留一位小数
    return parseFloat((validRate * 100).toFixed(1))
  })
  
  // 过滤掉异常年份(如未来年份)
  const currentYear = new Date().getFullYear()
  const filteredYears = []
  const filteredRates = []
  
  years.forEach((year, index) => {
    if (parseInt(year) <= currentYear) {
      filteredYears.push(year)
      filteredRates.push(rates[index])
    } else {
      console.warn(`发现未来年份数据: ${year}`)
    }
  })
  
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}年: {c}%',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: filteredYears,
      axisLabel: {
        interval: 0,
        rotate: 0,
        fontSize: 14
      }
    },
    yAxis: {
      type: 'value',
      name: '',
      min: 0,
      max: 100,
      interval: 20,
      axisLabel: {
        formatter: '{value}%',
        fontSize: 14
      }
    },
    series: [
      {
        name: '体测达标率',
        type: 'bar',
        data: filteredRates,
        barWidth: '40%',
        itemStyle: {
          color: function(params) {
            // 使用统一的蓝色
            return '#4B96F3'
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}%',
          fontSize: 14,
          color: '#333'
        }
      }
    ]
  }
  
  eduYearsRateChart.setOption(option)
}

// 验证百分比率值，确保在0-1之间
const validateRate = (rate) => {
  // 如果不是数字，返回0
  if (typeof rate !== 'number') return 0
  
  // 如果已经是小数形式(0-1之间)，直接返回
  if (rate >= 0 && rate <= 1) return rate
  
  // 如果是大于1的数值，假设是已经是百分比形式，转换为小数
  if (rate > 1 && rate <= 100) return rate / 100
  
  // 如果是异常大的值，可能是错误数据，限制在合理范围内
  if (rate > 100) return 1
  
  // 负数或其他情况，返回0
  return 0
}

onMounted(() => {
  // 查询今年体测工作状态
  fetchReportWorkStatus().then(async (success) => {
    if (success && (reportWorkStatus.value.status === 1 || reportWorkStatus.value.status === 2)) {
      // 如果体测工作已开展，获取仪表盘数据并初始化图表
      await fetchDashboardData()
      
      // 确保DOM元素已经渲染
      setTimeout(() => {
        // 根据角色初始化不同的图表
        if (dashboardData.value.role === 2) {
          // 教育局管理员
          initEduYearsRateChart()
        } else {
          // 班主任和学校管理员
          initCompletionChart()
          initScoreChart()
          initBmiChart()
          
          // 学校管理员还需要初始化年度达标率图表
          if (dashboardData.value.role === 1) {
            initYearsRateChart()
          }
        }
        
        // 响应窗口大小变化
        window.addEventListener('resize', () => {
          completionChart?.resize()
          scoreChart?.resize()
          bmiChart?.resize()
          yearsRateChart?.resize()
          eduYearsRateChart?.resize()
        })
      }, 100) // 添加短暂延时确保DOM已渲染
    }
  })
})

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}

// 计算百分比
const calculatePercentage = (value) => {
  const total = dashboardData.value.excellence + dashboardData.value.good + 
    dashboardData.value.qualified + dashboardData.value.substandard
  if (total === 0) return 0
  return Math.round(value / total * 100)
}

// 是否是班主任角色
const isClassTeacher = computed(() => dashboardData.value.role === 0)

// 是否是学校管理员
const isSchoolAdmin = computed(() => dashboardData.value.role === 1)

// 是否是教育局管理员
const isEducationAdmin = computed(() => dashboardData.value.role === 2)

// 获取当前年份
const currentYear = new Date().getFullYear()
</script>

<template>
  <div class="dashboard-container">
    <el-card v-if="isLoading" v-loading="true" class="loading-card">
      <div class="loading-text">正在加载数据...</div>
    </el-card>

    <template v-else-if="reportWorkStatus.status === 0">
      <el-empty 
        description="本年度的体测上报工作尚未开展" 
        class="no-work-empty"
      >
        <template #image>
          <img src="../assets/数据上报.svg" class="empty-icon" alt="未开展" />
        </template>
        <el-button type="primary">查看历年体测数据</el-button>
      </el-empty>
    </template>

    <div v-else>
      <!-- 非教育局管理员视角 - 四格布局 -->
      <div v-if="!isEducationAdmin" class="dashboard-grid">
        <!-- 数据上报完成总览 -->
        <div class="stats-card">
          <h3 class="card-title">数据上报完成总览</h3>
          <div class="completion-stats">
            <div class="chart-container">
              <div id="completion-chart" class="chart"></div>
              <div class="center-icon">
                <img src="../assets/数据上报.svg" alt="">
              </div>
            </div>
            <div class="stats-info">
              <div class="stats-details">
                <div class="stat-item">
                  <div class="stat-dot not-uploaded"></div>
                  <span>未上报 {{ dashboardData.unfinishedCount }}</span>
                </div>
                <div class="stat-item">
                  <div class="stat-dot uploaded"></div>
                  <span>已上报 {{ dashboardData.finishedCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 成绩指标 -->
        <div class="stats-card">
          <h3 class="card-title">成绩指标</h3>
          <div class="scores-stats">
            <div id="score-chart" class="chart"></div>
            <div class="score-details">
              <div class="score-item">
                <span class="score-label">优秀</span>
                <span class="score-value">{{ calculatePercentage(dashboardData.excellence) }}%</span>
              </div>
              <div class="score-item">
                <span class="score-label">良好</span>
                <span class="score-value">{{ calculatePercentage(dashboardData.good) }}%</span>
              </div>
              <div class="score-item">
                <span class="score-label">合格</span>
                <span class="score-value">{{ calculatePercentage(dashboardData.qualified) }}%</span>
              </div>
              <div class="score-item">
                <span class="score-label">不合格</span>
                <span class="score-value">{{ calculatePercentage(dashboardData.substandard) }}%</span>
              </div>
            </div>
          </div>
        </div>

        <!-- BMI指数分布 -->
        <div class="stats-card bmi-card">
          <h3 class="card-title">BMI指数分布</h3>
          <div id="bmi-chart" class="chart bmi-chart"></div>
        </div>

        <!-- 近五年体测数据达标率 (只在学校管理员视角显示) -->
        <div v-if="isSchoolAdmin" class="stats-card">
          <h3 class="card-title">近五年体测数据达标率</h3>
          <div id="years-rate-chart" class="chart years-rate-chart"></div>
        </div>

        <!-- 快捷操作区 (只在班主任视角显示) -->
        <div v-if="isClassTeacher" class="stats-card action-card">
          <div class="action-item" v-if="reportWorkStatus.status === 1">
            <h3>{{ currentYear }}年体测工作进行中，去上报</h3>
            <el-button type="primary" plain class="action-btn">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
          <div class="action-item" v-else-if="reportWorkStatus.status === 2">
            <h3>查看本年度体测报告</h3>
            <el-button type="primary" plain class="action-btn">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
          <div class="action-item">
            <h3>查看历年体测数据详情</h3>
            <el-button type="primary" plain class="action-btn">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
        </div>
      </div>

      <!-- 教育局管理员视角 - 二分布局 -->
      <div v-else class="education-admin-dashboard">
        <!-- 左侧快捷入口区域 -->
        <div class="edu-admin-left">
          <div v-if="reportWorkStatus.status === 1" class="edu-quick-link">
            <div class="quick-link-content">
              <h3>{{ currentYear }}体测工作进行中</h3>
              <p>点此查看上报情况</p>
            </div>
            <el-button class="quick-link-arrow-btn">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
          <div v-else class="edu-quick-link">
            <div class="quick-link-content">
              <h3>{{ currentYear }}体测工作尚未启动</h3>
              <p>点此查看历年数据</p>
            </div>
            <el-button class="quick-link-arrow-btn">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
          <div class="edu-quick-link">
            <div class="quick-link-content">
              <h3>信息维护</h3>
            </div>
            <el-button class="quick-link-arrow-btn">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
        </div>

        <!-- 右侧近五年体测数据达标率图表 -->
        <div class="edu-admin-right">
          <div class="edu-chart-container">
            <h3 class="chart-title">近五年体测数据达标率</h3>
            <div id="edu-years-rate-chart" class="chart"></div>
          </div>
        </div>
      </div>

      <!-- 体测工作状态信息 -->
      <div v-if="!isEducationAdmin" class="work-status-info">
        <div class="status-badge" :class="reportWorkStatus.status === 1 ? 'in-progress' : 'completed'">
          {{ reportWorkStatus.status === 1 ? '进行中' : '已结束' }}
        </div>
        <div class="status-dates">
          <span>开始：{{ formatDate(reportWorkStatus.beginDate) }}</span>
          <span>结束：{{ formatDate(reportWorkStatus.endDate) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 16px;
  min-height: calc(100vh - 100px);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  height: calc(100vh - 140px);
}

/* 教育局管理员特有样式 */
.education-admin-dashboard {
  display: flex;
  height: calc(100vh - 140px);
  gap: 16px;
}

.edu-admin-left {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.edu-admin-right {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.edu-quick-link {
  background-color: #f7f9fc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 90px;
}

.quick-link-content h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 5px 0;
  color: #333;
}

.quick-link-content p {
  font-size: 14px;
  margin: 0;
  color: #666;
}

.quick-link-arrow-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edu-chart-container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-title {
  font-size: 16px;
  color: #333;
  margin: 0 0 20px 0;
  font-weight: 500;
}

.loading-card {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-text {
  font-size: 16px;
  color: #666;
}

.no-work-empty {
  height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.empty-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.stats-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.work-status-info {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  margin-bottom: 5px;
}

.in-progress {
  background-color: #409EFF;
}

.completed {
  background-color: #67C23A;
}

.status-dates {
  font-size: 12px;
  color: #666;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.card-title {
  font-size: 16px;
  color: #333;
  margin: 0 0 20px 0;
  padding: 0;
  font-weight: 500;
}

/* 数据上报完成总览卡片样式 */
.completion-stats {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}

.chart-container {
  position: relative;
  height: 100%;
  width: 100%;
  max-height: 250px;
}

.chart {
  height: 100%;
  width: 100%;
  min-height: 200px;
}

.center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-icon img {
  width: 60px;
  height: 60px;
}

.stats-info {
  width: 100%;
  margin-top: 20px;
}

.stats-details {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.not-uploaded {
  background-color: #E1E6EB;
}

.uploaded {
  background-color: #5470C6;
}

/* 成绩指标卡片样式 */
.scores-stats {
  display: flex;
  flex: 1;
  align-items: center;
}

.score-details {
  margin-left: 20px;
}

.score-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.score-label {
  color: #666;
  font-size: 14px;
}

.score-value {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

/* BMI卡片样式 */
.bmi-chart {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 近五年体测数据达标率卡片样式 */
.years-rate-chart {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 快捷操作区卡片样式 */
.action-card {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.action-item {
  background-color: #f7f9fc;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-item h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

.action-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 